<template>
    <van-tabbar v-model="active" active-color="#fd8731" fixed>
        <van-tabbar-item to="/user-home" name="home">
            <span>首页</span>
            <template #icon>
                <i class="iconfont icon-shouye"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/ai-scan" name="aiscan">
            <span>智能识物</span>
            <template #icon>
                <i class="iconfont icon-paizhao"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/app-service" name="appt">
            <span>预约服务</span>
            <template #icon>
                <i class="iconfont icon-daichuliyuyue_bifuben"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/user-center" name="usercenter">
            <span>个人中心</span>
            <template #icon>
                <i class="iconfont icon-gerenzhongxin"></i>
            </template>
        </van-tabbar-item>

    </van-tabbar>

</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
// 当前激活的标签页
const active = ref('home');
const router = useRoute();
// 根据路由路径自动更新激活状态
watchEffect(() => {
    const pathToName = {
        '/user-home': 'home',
        '/ai-scan': 'aiscan',
        '/app-service': 'appt',
        '/user-center': 'usercenter'
    };
    active.value = pathToName[router.path] || 'home';
});
</script>

<style lang="less" scoped>
.van-tabbar {
    height: 7rem;
    box-sizing: border-box;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;

    :deep(.van-tabbar-item__text) {
        margin-top: 0.4rem;
    }

    :deep(.van-tabbar-item__text) {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 12px;
        // color: #FFFFFF;
        font-style: normal;
        text-transform: none;

    }
}
</style>